<style>

</style>

<div class="row">
    <div class="col-md-12">
        <div>
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="form-group">
                            <form action="" method="get">
                                <div class="form-inline">
                                    <label class="my-1" for="user_name" style="margin-right: 5px">月度</label>
                                    <select class="custom-select my-1 mr-sm-2" name="user_id" id="user_name">
                                        <option value="">未填</option>
                                        <option value=""></option>
                                    </select>
                                    <button type="submit" class="btn btn-primary my-1">查询</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body row">
                        @foreach($ownerItems as $ownerItem)
                        <div class="col-md-3">
                            <div id="metric-card-4irzBtFZ" class="card" style="min-height:165px;">
                                <div class="card-header d-flex justify-content-between align-items-start pb-0">
                                    <div class="metric-header">
                                        <div>
                                            <h4 class="card-title mb-1">101
                                                @if($ownerItem->pay_at)
                                                    <span style="font-size: 14px;"> (已支付)</span>
                                                @elseif($ownerItem->nextRentDays > 0)
                                                    <span style="color: forestgreen; font-size: 14px;"> (离最晚交租：{{ceil($ownerItem->nextRentDays)}})</span>
                                                @else <span style="color: red; font-size: 14px;">（逾期：" . {{ abs(ceil($ownerItem->nextRentDays)) }} . "天）</span> @endif
                                            </h4>
                                            <div class="metric-header"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <a class="btn btn-primary btn-sm" href="{{route('admin.owner.show', ['owner' => $ownerItem->owner->id])}}">合同详情</a>
                                        <a class="btn btn-primary btn-sm" href="{{route('admin.running-water.index')}}?room_id={{$ownerItem->owner->ownerable_id}}">未收账单</a>
                                    </div>
                                </div>
                                <div class="metric-content">
                                    <!-- 数据呈现 -->
                                    <p style="margin-left: 10px; margin-top: 8px;">合同周期： {{$ownerItem->owner->started_at->toDateString()." ~ ".$ownerItem->owner->ended_at->toDateString()}}</p>
                                    <p style="margin-left: 10px; ">合同租金： {{$ownerItem->owner->cycle_price." / ".$ownerItem->owner->cycle . \App\Models\Owner::$cycleUnitMap[$ownerItem->owner->cycle_unit] }}</p>
                                    <p style="margin-left: 10px; ">第几期交易： {{$ownerItem->owner->now_cycle}}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="card-footer">

                </div>
            </div>
        </div>
    </div>


</div>


<script>
    Dcat.ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(".changeHouse").on('change', function () {
            let id = $(this).val();  // 获取房产id
            let url = "/building/" + id + "/house"

            // 获取楼栋列表
            $.ajax({
                url: url,
                method: "get",
                contentType: "application/json",
                data: JSON.stringify({
                    _token: "{{ csrf_token() }}"
                }),
            }).then(function (res) {
                if (res.code === 200) {
                    Dcat.swal.success(res.message).then(function () {
                        location.reload();
                    });
                } else {
                    Dcat.swal.error(res.message, '').then(function () {
                        location.reload();
                    });
                }
            }).catch(function () {

            })

        })
    });
</script>